<template>
  <base-breadcrumb :title="titleName">
    <searchData
      :search-data="searchArr"
      @search="searchData"
    />

    <a-card :bordered="false">
      <title-name title="月计划列表" />
      <div class="pub-table-select-count">
        <a-icon
          type="info-circle"
          theme="twoTone"
        />
        <span style="margin-right: 12px"> 项目名称：<span class="totalNum">{{ projectName }}</span> |
          已进行月计划<span class="totalNum"> {{ details.outMonthPlan }} </span> 个月  |
          未进行月计划 <span class="totalNum">{{ details.notMonthPlan }}</span> 个月  |
          当前进行月计划 <span class="totalNum">{{ details.inMonthPlan }}</span>
        </span>
      </div>


      <a-table
        ref="table"
        :pagination="false"
        :scroll="{ x: 900 }"
        bordered
        size="default"
        row-key="key"
        :columns="columns"
        :data-source="dataSource"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :row-selection="rowSelection"
        :row-class-name="fnRowClass"
        show-pagination="auto"
        :loading="loadingState.loadData"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="projectTime"
          slot-scope="text, record, index"
        >
          <template>
            {{ record.contractStartDate }}——{{ record.contractFinishDate }}
          </template>
        </span>
        <span
          slot="projectFormat"
          slot-scope="text, record, index"
        >
          <template>
            {{ record.projectFormat&&(record.projectFormat).join("&") }}
          </template>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <a
              v-btnPermission="'pm_010_loo_01'"
              @click="handleSub(record)"
            >查看</a>
            <span
              v-if="record.statusCode==1 || record.statusCode==4"
              v-btnPermission="'pm_010_edi_02'"
            ><a-divider type="vertical" />
              <a
                v-btnPermission="'pm_010_edi_02'"
                @click="handleEdit(record)"
              >编辑</a></span>
            <span
              v-if="record.statusCode==1 || record.statusCode==4"
              v-btnPermission="'pm_010_sub_03'"
            ><a-divider type="vertical" />
              <a
                v-btnPermission="'pm_010_sub_03'"
                @click="hanleApprove(record)"
              >提交审批</a></span>
            <span v-if="record.reviewButton == 1 "><a-divider
              v-btnPermission="'pm_010_moi_04'"
              type="vertical"
            /><a
              v-btnPermission="'pm_010_moi_04'"
              @click="handleApproveDetail(record)"
            >审批信息</a></span>
          </template>
        </span>
      </a-table>
      <!--<pagination-->
      <!--:total="totalSize"-->
      <!--v-model="queryParam.pageNo"-->
      <!--:pageSize.sync="queryParam.pageSize"-->
      <!--@change="handlePageChange"-->
      <!--@showSizeChange="showSizeChange"-->
      <!--&gt;</pagination>-->

      <ApprovalDetails
        :title="'审批详情'"
        :business-id="businessId"
        :visible="visibleApprove"
        @cancel="visibleApprove = false"
        @confirm="visibleApprove = false"
      />
    </a-card>


    <div class="page-btn-right-top">
      <a-button
        type="primary"
        @click="goBack"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  import { getMonthPlan,monthPlanAudit } from '@/api/construction/monthPlan'
  import ApprovalDetails from '@/components/approvalDetails'

  const columns = [
    {
      title: '序号',
      width:'65px',
      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '计划时间',
      dataIndex: 'planTime',
    },
    {
      title: '当月需进行的节点总数',
      dataIndex: 'conductTotal',
    },
    {
      title: '当月计划开始节点数',
      dataIndex: 'startTotal',
    },
    {
      title: '当月计划结束节点数',
      dataIndex: 'endTotal',
    },
    {
      title: '延期到本月节点数',
      dataIndex: 'delayTotal',
    },
    {
      title: '状态',
      dataIndex: 'statusName',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width:'200px',
      fixed: 'right',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name:'a'+Date.now(),
    components: {
      ApprovalDetails,
    },
    data() {
      this.columns = columns
      return {
        searchArr: [
          // 搜索框
          {
            name: '时间搜索',
            value: 'time',
            type: 'dateRange'
          },
          {
            name: '状态',
            value: 'statusCode',
            type: 'select',
            data:[
              {
                value: '',
                label: '全部'
              },
              {
                value: '0',
                label: '正进行'
              },
              {
                value: '1',
                label: '审批中'
              },
              {
                value: '2',
                label: '审批不通过'
              },
              {
                value: '3',
                label: '已进行'
              },

            ]
          },
        ],
        dataSource:[],
        details:{},
        createValue:[], // 日期选择
        titleName:'',
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        totalSize:0,
        queryParam:{
          pageNo:1,
          pageSize:10,
          planId:'',
          startTime:'',
          endTime:'',
          statusCode:''
        },
        planId:"",


        selectedRowKeys: [],
        selectedRows: [],
        company:[],

        businessId:'',
        visibleApprove:false,
        projectName:'',
        loadingState: {
          loadData: false,
        }

      }
    },
    filters: {
      statusFilter(type) {
        return statusMap[type].text
      },
      statusTypeFilter(type) {
        return statusMap[type].status
      }
    },
    created() {
      this.projectName = this.$route.query.projectName
      this.getMonthList()

    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange
        }
      }
    },
    methods: {
      // 默认表格行的样式
      fnRowClass(record,index){
        return record.warningRed == 1 ? "csbsTypes" :""
      },
      // 关闭
      goBack() {
          this.$close()
      },
      handleApproveDetail(record){
        this.visibleApprove = true
        this.businessId = record.id
      },
      getMonthList(){
        this.loadingState.loadData = true
        this.queryParam.planId = this.$route.query.id
        getMonthPlan(this.queryParam).then(res=>{
          this.loadingState.loadData = false
          this.dataSource = res.data.list
          this.details = res.data
        }).catch(() => {
          this.loadingState.loadData = false
        })
      },
      handlePageChange(pageNo, pageSize) {
        this.queryParam.pageNo = pageNo;
      },
      showSizeChange(pageNo, pageSize) {
        this.queryParam.pageSize = pageSize;
        this.initTable();
      },

      initTable() {
        this.queryParam.pageNo = 1;
        this.getMonthList();
      },

      searchData(val){   // 搜索
        this.queryParam = val
        if(this.queryParam.time){
          this.queryParam.startTime = this.formatDate((this.queryParam.time[0]))
          this.queryParam.endTime = this.formatDate((this.queryParam.time[1]))
        }
        this.getMonthList()
      },

      handleEdit(record) {
        sessionStorage.setItem("monthListTotal",JSON.stringify(record))
        this.$router.push({path:'/construction/editmonth',query:{id:record.id}})

      },
      hanleApprove(val){  // 提交审批
        let that = this;
        that.$confirm({
          title: '是否确定提交审批?',
          content:  '',
          onOk() {
            return new Promise((resolve, reject) => {
              let data = { id:val.id }
              monthPlanAudit(data).then(res => {
                if (res.data.code == 200) {
                  that.$message.success("提交审批成功！")
                  that.getMonthList()
                } else {
                  that.$message.error("审批失败！")
                }
              }).catch((e) => {
                that.$message.error(e)
              }).finally(() => {
                resolve()
              })
            })
          },
          onCancel() {

          },

        });
      },

      handleSub(record) {
        sessionStorage.setItem("monthListTotal",JSON.stringify(record))
        this.$router.push({path:'/construction/month/detail',query:{id:record.id}})

      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
    }
  }
</script>

<style scoped>
    /deep/.csbsTypes td{
        background-color: rgba(240, 153, 164, 1);
        color: #fff;
    }
</style>
